<template>
      <header class="customHeaderStyle" style="position:relative;width:100%;background: white;z-index: 99">
        <div class="burger" :class="{'menu-opened' :isSlideBarOpen}">
          <i></i>
          <i></i>
          <i></i>
        </div>
        <div class="headerCustomTitle">{{pageTitle}}</div>
        <cart-show-num style="position: absolute;margin: auto;top:0; bottom:0"></cart-show-num>
      </header>
</template>

<script>
 import CartShowNum from '../CartShowNum'
  export default {
    data () {
      return {
        isSlideBarOpen:false
      }
    },
    props: {
      pageTitle :{
        type: String,
        default : ""
      }
    },
    components: {
      CartShowNum
    }
  }
</script>

<style>
  .customHeaderStyle{
		position: relative;
		background: #fff;
		min-height: 3rem;
		border-bottom: 1px solid #eaeaea;
		color: #444;
		font-weight: 700;
		left: 0;
		top: 0;
		line-height: 2.25rem;
		/* z-index: 2; */
		width: 100%;
		font-size: .9rem;
		text-align: center;
		margin: 0;
		padding: 0;
	}
	.headerCustomTitle{
		overflow: hidden;
		right: 6rem;
		font-weight: 500;
		min-height: 2.25rem;
		position: absolute;
		margin: 0;
		text-align: left;
		white-space: nowrap;
		left: 3rem;
		width: auto;
		text-overflow: ellipsis;
		z-index: 2;
		font-size: 1.1rem;
		margin-top: .35rem;
		top: 1px;
	}
</style>
